<!-- #layout name=blank -->
<div id="app">
  <div class="page-header">
    <h1 class="title">Table Relation</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a @click="showCreateModal=true" class="btn green navbar-btn">New</a>
      <a v-if="selectedRows.length" @click="onDelete" class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="model" show-select :selected.sync="selectedRows">
    <kb-table-column :label="Kooboo.text.common.name" prop="name">
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.component.tableRelation.tableA"
      prop="tableA"
    >
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.component.tableRelation.fieldA"
      prop="fieldA"
    >
    </kb-table-column>
    <kb-table-column :label=" Kooboo.text.common.Relation">
      <template v-slot="row">
        <span class="label label-sm green">{{row.relationName}}</span>
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.component.tableRelation.tableB"
      prop="tableB"
    >
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.component.tableRelation.fieldB"
      prop="fieldB"
    >
    </kb-table-column>
  </kb-table>
  <div
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    v-kb-modal="showCreateModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">{{Kooboo.text.common.TableRelation}}</h4>
        </div>
        <div class="modal-body" v-if="showCreateModal">
          <kb-form
            :model="createModel"
            :rules="createModelRules"
            ref="createForm"
          >
            <kb-form-item prop="name">
              <label class="col-md-3 control-label"
                >{{ Kooboo.text.common.name}}</label
              >
              <div class="col-md-9">
                <input
                  type="text"
                  class="form-control"
                  v-model="createModel.name"
                />
              </div>
            </kb-form-item>
            <kb-form-item prop="tableA">
              <label class="col-md-3 control-label"
                >{{Kooboo.text.component.tableRelation.tableA}}</label
              >
              <div class="col-md-9">
                <select class="form-control" v-model="createModel.tableA">
                  <option
                    v-for="table in tables"
                    :value="table.name"
                    :key="table.name"
                  >
                    {{table.name}}
                  </option>
                </select>
              </div>
            </kb-form-item>
            <kb-form-item v-show="tableAObject" prop="fieldA">
              <label class="col-md-3 control-label"
                >{{Kooboo.text.component.tableRelation.fieldA}}</label
              >
              <div class="col-md-9">
                <select
                  v-if="tableAObject"
                  class="form-control"
                  v-model="createModel.fieldA"
                >
                  <option
                    v-for="field in tableAObject.fields"
                    :key="field"
                    :value="field"
                    >{{field}}</option
                  >
                </select>
              </div>
            </kb-form-item>
            <kb-form-item prop="relation">
              <label class="col-md-3 control-label"
                >{{Kooboo.text.common.Relation}}</label
              >
              <div class="col-md-9">
                <select class="form-control" v-model="createModel.relation">
                  <option
                    v-for="item in relationTypes"
                    :key="item.type"
                    :value="item.type"
                    >{{item.displayName}}
                  </option>
                </select>
              </div>
            </kb-form-item>
            <kb-form-item prop="tableB">
              <label class="col-md-3 control-label"
                >{{Kooboo.text.component.tableRelation.tableB}}</label
              >
              <div class="col-md-9">
                <select class="form-control" v-model="createModel.tableB">
                  <option
                    v-for="table in tables"
                    :value="table.name"
                    :key="table.name"
                  >
                    {{table.name}}
                  </option>
                </select>
              </div>
            </kb-form-item>
            <kb-form-item v-show="tableBObject" prop="fieldB">
              <label class="col-md-3 control-label"
                >{{Kooboo.text.component.tableRelation.fieldB}}</label
              >
              <div class="col-md-9">
                <select
                  v-if="tableBObject"
                  class="form-control"
                  v-model="createModel.fieldB"
                >
                  <option
                    v-for="field in tableBObject.fields"
                    :key="field"
                    :value="field"
                    >{{field}}</option
                  >
                </select>
              </div>
            </kb-form-item>
          </kb-form>
          <div class="modal-footer">
            <button class="btn blue" @click="onSave"
              >{{Kooboo.text.common.save}}</button
            >
            <button class="btn gray" data-dismiss="modal"
              >{{ Kooboo.text.common.cancel}}</button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/components/kbBreadcrumb.js",
    "/_Admin/Scripts/components/kbTable.js",
    "/_Admin/Scripts/components/kbForm.js"
  ]);
  new Vue({
    el: "#app",
    data: function() {
      return {
        breads: [
          {
            name: "SITES"
          },
          {
            name: "DASHBOARD"
          },
          {
            name: Kooboo.text.common.TableRelation
          }
        ],
        showCreateModal: false,
        selectedRows: [],
        model: [],
        tables: [],
        relationTypes: [],
        createModel: {
          name: "",
          tableA: "",
          fieldA: "",
          tableB: "",
          fieldB: "",
          relation: ""
        },
        createModelRules: {
          name: [{ required: Kooboo.text.validation.required }],
          tableA: [{ required: Kooboo.text.validation.required }],
          fieldA: [{ required: Kooboo.text.validation.required }],
          tableB: [{ required: Kooboo.text.validation.required }],
          fieldB: [{ required: Kooboo.text.validation.required }],
          relation: [{ required: Kooboo.text.validation.required }]
        }
      };
    },
    mounted: function() {
      this.loadData();
    },
    computed: {
      tableAObject: function() {
        var me = this;
        return this.tables.find(function(f) {
          return f.name == me.createModel.tableA;
        });
      },
      tableBObject: function() {
        var me = this;
        return this.tables.find(function(f) {
          return f.name == me.createModel.tableB;
        });
      }
    },
    methods: {
      onDelete: function() {
        var me = this;
        var ids = this.selectedRows.map(function(m) {
          return m.id;
        });

        if (!confirm(Kooboo.text.confirm.deleteItems)) return;

        Kooboo[Kooboo.TableRelation.name]
          .Deletes({
            ids: ids
          })
          .then(function(res) {
            if (res.success) {
              me.loadData();
            }
          });
      },
      onSave: function() {
        var me = this;
        if (this.$refs.createForm.validate()) {
          Kooboo.TableRelation.post(this.createModel).then(function(res) {
            if (res.success) {
              window.info.done(Kooboo.text.info.save.success);
              me.loadData();
              me.showCreateModal = false;
            }
          });
        }
      },
      loadData: function() {
        var me = this;
        Kooboo.TableRelation.getList().then(function(res) {
          if (res.success) {
            me.model = res.model;
          }
        });
      }
    },
    watch: {
      showCreateModal: function(value) {
        var me = this;
        if (value) {
          $.when(
            Kooboo.TableRelation.getTablesAndFields(),
            Kooboo.TableRelation.getRelationTypes()
          ).then(function(r1, r2) {
            me.tables = r1[0].model;
            me.relationTypes = r2[0].model;
            if (me.tables && me.tables.length) {
              me.createModel.tableA = me.tables[0].name;
              me.createModel.tableB = me.tables[0].name;
              if (me.tables[0].fields && me.tables[0].fields.length) {
                me.createModel.fieldA = me.tables[0].fields[0];
                me.createModel.fieldB = me.tables[0].fields[0];
              }
            }
            if (me.relationTypes && me.relationTypes.length) {
              me.createModel.relation = me.relationTypes[0].type;
            }
          });
        } else {
          me.createModel = {
            name: "",
            tableA: "",
            fieldA: "",
            tableB: "",
            fieldB: "",
            relation: ""
          };
        }
      }
    }
  });
</script>
